<template>
    <div ref="my-chart" style="width: 1620px; height: 230px; position: relative; margin-top: 10px;"></div>
</template>

<script>
export default {
  name: 'MyChart',
  props:{
    title:String,
    dataList:Array,
  },
  mounted () {
    // var dataList=[
    //   {name:'已付款',list:[{key:'2022-09-21',value:133},{key:'2022-09-23',value:311},{key:'2022-09-25',value:105}]},
    //   {name:'已完成',list:[{key:'2022-09-21',value:131},{key:'2022-09-23',value:305},{key:'2022-09-25',value:101}]},
    //   {name:'已退货',list:[{key:'2022-09-21',value:2},{key:'2022-09-23',value:6},{key:'2022-09-25',value:4}]}
    // ]
    // var option = this.getOption('订单数据',dataList)
    // console.log('option',option)
    this.drawChart()
  },
  methods:{
    /**
     * dataMap:[
     *  {name:'已付款',list[{key:'2022-09-21',value:31},{key:'2022-09-23',value:45},{key:'2022-09-25',value:51}]},
     *  {name:'已完成',list[{key:'2022-09-21',value:31},{key:'2022-09-23',value:45},{key:'2022-09-25',value:51}]},
     *  {name:'已退货',list[{key:'2022-09-21',value:31},{key:'2022-09-23',value:45},{key:'2022-09-25',value:51}]}
     *  ]
      */

    drawChart() {
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      let myChart = this.$echarts.init(this.$refs['my-chart']);

      // 指定图表的配置项和数据
      /* let option = this.getOption('订单数据',[
        {name:'已付款',list:[{key:'2022-09-21',value:133},{key:'2022-09-23',value:95},{key:'2022-09-25',value:105},{key:'2022-09-27',value:125}]},
        {name:'已完成',list:[{key:'2022-09-21',value:131},{key:'2022-09-23',value:90},{key:'2022-09-25',value:101},{key:'2022-09-27',value:111}]},
        {name:'已退货',list:[{key:'2022-09-21',value:2},{key:'2022-09-23',value:6},{key:'2022-09-25',value:4},{key:'2022-09-27',value:14}]},
      ]); */
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(this.getOption(this.$props.title,this.$props.dataList));
    },
    /**
     * 生成配置
     * @param title
     * @param dataMap
     * @returns {{yAxis: {type: string}, xAxis: {data: *[], boundaryGap: boolean}, legend: {data: *[]}, series: *[], tooltip: {trigger: string}, title: {text}}}
     */
    getOption:function (title,dataMap) {
      var legendDataArr=[]
      var xAxisDataArr=[]
      var seriesArr=[]
      // 取第一条记录的日期值,构造【日期数组】
      dataMap[0].list.forEach(function (value, index) {
        xAxisDataArr.push(value.key)
      })
      // 构造【类型数组】,【类型数值数组】
      dataMap.forEach(function (value, index) {
        legendDataArr.push(value.name)
        var tmpValueArr=[]
        value.list.forEach(function (_value, _index) {
          tmpValueArr.push(_value.value)
        })
        seriesArr.push({
          name: value.name,
          type: "line",
          // stack: 'Total',
          data: tmpValueArr,
        })
      })

      // 配置文档: https://blog.csdn.net/heiren_a/article/details/123744428
      return {
        title: {
          text: title,
          x: 'left',                 // 水平安放位置，默认为左对齐，可选为：
          // 'center' ¦ 'left' ¦ 'right'
          // ¦ {number}（x坐标，单位px）
          y: 'top',
          textStyle: {
            fontSize: 15,
            fontWeight: 'bolder',
            color: '#333333'          // 主标题文字颜色
          },
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          x: 'right',               // 水平安放位置，默认为全图居中，可选为：
          // 'center' ¦ 'left' ¦ 'right'
          // ¦ {number}（x坐标，单位px）
          y: 'top',
          data: legendDataArr,
        },
        xAxis: {
          // type: 'category',
          boundaryGap: false,
          data: xAxisDataArr,
        },
        yAxis: {
          // type: 'value'
        },
        series: seriesArr,
      }
    },
  }
}
</script>

<style scoped>

</style>
